/* 整个div */
.hole-div{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 209, 2);
}
/* 手机顶部 */
.top-head{
    height: 8vw;
}
/* 顶部样式 */
.top{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* 顶部盒子的顶部样式 */
.th-top{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.fa-chevron-left{
    font-size:4vw ;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8vw;
}
.tht-text{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    font-weight: bold;
}
/* 顶部盒子的底部样式 */
.th-bottom{
    height: 28vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.thb-box{
    height: 50%;
    background-color: rgb(253, 248, 241);
    width: 95%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.thbb-text{
    background-color: rgb(255, 250, 246);
    width: 97%;
    height: 82%;
    border: 0.1vw solid rgb(240, 237, 230);
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 10px; 
    color: rgb(57, 33, 15);
    font-size: 3.5vw;
    font-weight: bolder;
}
.thbbt-text{
    margin-left: 2vw;
}
/* 底部 */
.footer{
    height: 20vw;
    width: 100%;
}
.fixed{
    background-color: #fff;
    height: 20vw;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top:0.1vw solid rgb(240, 237, 230) ;
}
/* 左侧 */
.f-left{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    margin-left: 4vw;
}
.fl-div{
    display: flex;
    justify-content: start;
    align-items: flex-end;
}
.fl-top{
    font-size: 6vw;
    font-weight: bold;
    width: auto;
}
.flt-text{
    font-size: 2vw;
    font-weight: 550;
    width: auto;
    height: 4.5vw;
    margin-left: 1vw;
}
.fl-bottom{
    font-size: 2.6vw;
    color: rgb(238, 95, 6);
    font-weight: 550;
    margin-top: 0.5vw;
}
/* 右侧 */
.f-right{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: flex-start;
}
.fr-bgbox{
    background-color: rgb(255, 98, 3);
    height: 50%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30vw;
    margin-right: 4vw;
    margin-top: 5vw;
}
.frb-text{
    width: auto;
    color: #fff;
    font-size: 3.5vw;
    font-weight: bold;
}
/* 中部 */
.mid{
    background-color: rgb(247, 247, 247);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 4vw;
    border-radius: 3vw 3vw 0 0;
}
.mid-top{
    display: flex;
    justify-content: space-between;
    height: 15vw;
}
.mt-left{
    font-size: 3.8vw;
    font-weight: bold;
    width: auto;
    display: flex;
    justify-content: start;
    align-items: center;
}
.mtl-text{
    width: auto;

}
.mt-right{
    width: auto;
    display: flex;
    justify-content: end;
    align-items: center;
}
.fa-location-arrow{
    width: auto;
    margin-right: 1vw;
}
.mtr-text{
    font-size: 3vw;
    font-weight: bold;
}
.m-bottomm{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mb-ul{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}
.mbu-li{
    background-color: rgb(254, 240, 227);
    border: 0.4vw solid rgb(178, 146, 123);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 2vw;
    border-radius: 3vw;
    margin-bottom: 3vw;
}
.mbul-top{
    height: 4vw;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 1vw;
}
.mbult-text{
    width: 11vw;
    height: 100%;
    font-size: 2vw;
    font-weight: bolder;
    background-color: rgb(254, 215, 172);
    color: rgb(92, 29, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.mbul-bottom{
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.mbulb-left{
    flex-basis: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.mbulbl-top{
    font-size: 3.2vw;
    font-weight: bold;
    letter-spacing: 0.3vw;
    margin-bottom: 1.5vw;
}
.mbulbl-mid{
    font-size: 2.5vw;
    margin-bottom: 1vw;
    color: rgb(86, 85, 85);
    margin-bottom: 1.5vw;
    font-weight: 500;
}
.mbulbl-bottom{
    width: auto;
    border: 0.1vw solid rgb(169, 168, 168);
    margin-bottom: 5vw;
    border-radius: 5px;
    height: auto;
}
.mbulblb-text{
    margin: 0.5vw 1vw;
    color: rgb(86, 85, 85);
    font-size: 2.5vw;
    font-weight: 500;
}
.mbulb-right{
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}
.mbulbr-top{
    width: auto;
    margin-bottom: 1vw;
    font-size: 4vw;
    font-weight: bolder;
}
.mbulbr-mid{
    background-color: rgb(255, 227, 205);
    width: auto;
    margin-bottom: 1.5vw;
    border-radius: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mbulbrm-text{
    margin: 0.3vw 1.5vw;
    font-size: 2vw;
    color: rgb(238, 95, 6);
    font-weight: 550;
}
.mbulbr-bottom{
    width: auto;
}
.mbulbr-bottom{
    font-size: 2vw;
    color: rgb(121, 121, 121);
}